import { LitElement, html, css } from 'lit';
import { customElement, property, state } from 'lit/decorators.js';

/**
 * Message消息提示组件
 * @element zss-message
 */
@customElement('zss-message')
export class ZssMessage extends LitElement {
  static styles = css`
    :host {
      position: fixed;
      top: 20px;
      left: 50%;
      transform: translateX(-50%);
      z-index: 2000;
    }
    
    .message {
      display: flex;
      align-items: center;
      padding: 12px 16px;
      border-radius: 4px;
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
      background-color: #fff;
      border: 1px solid #ebeef5;
      transition: opacity 0.3s, transform 0.3s;
      margin-bottom: 10px;
    }
    
    .message.success {
      background-color: #f0f9ff;
      border-color: #e1f3ff;
      color: #67c23a;
    }
    
    .message.warning {
      background-color: #fdf6ec;
      border-color: #faecd8;
      color: #e6a23c;
    }
    
    .message.info {
      background-color: #f4f4f5;
      border-color: #e9e9eb;
      color: #909399;
    }
    
    .message.error {
      background-color: #fef0f0;
      border-color: #fde2e2;
      color: #f56c6c;
    }
    
    .message-icon {
      margin-right: 8px;
      font-size: 16px;
    }
    
    .message-content {
      flex: 1;
      font-size: 14px;
    }
    
    .message-close {
      margin-left: 8px;
      cursor: pointer;
      color: #c0c4cc;
      font-size: 16px;
    }
    
    .message-close:hover {
      color: #909399;
    }
    
    .message.enter {
      opacity: 0;
      transform: translate(-50%, -20px);
    }
    
    .message.enter-active {
      opacity: 1;
      transform: translate(-50%, 0);
    }
    
    .message.leave {
      opacity: 1;
      transform: translate(-50%, 0);
    }
    
    .message.leave-active {
      opacity: 0;
      transform: translate(-50%, -20px);
    }
  `;

  /**
   * 消息类型
   * @attr type
   */
  @property({ type: String })
  type: 'success' | 'warning' | 'info' | 'error' = 'info';

  /**
   * 消息内容
   * @attr message
   */
  @property({ type: String })
  message = '';

  /**
   * 显示时长（毫秒）
   * @attr duration
   */
  @property({ type: Number })
  duration = 3000;

  /**
   * 是否显示关闭按钮
   * @attr show-close
   */
  @property({ type: Boolean })
  showClose = false;

  /**
   * 是否显示中
   */
  @state()
  private visible = false;

  /**
   * 动画状态
   */
  @state()
  private animationState: 'enter' | 'enter-active' | 'leave' | 'leave-active' = 'enter';

  private timer?: number;

  connectedCallback() {
    super.connectedCallback();
    this.show();
  }

  disconnectedCallback() {
    this.clearTimer();
    super.disconnectedCallback();
  }

  private show() {
    this.visible = true;
    this.animationState = 'enter';
    
    requestAnimationFrame(() => {
      this.animationState = 'enter-active';
      
      if (this.duration > 0) {
        this.timer = window.setTimeout(() => {
          this.close();
        }, this.duration);
      }
    });
  }

  private close() {
    this.clearTimer();
    this.animationState = 'leave';
    
    requestAnimationFrame(() => {
      this.animationState = 'leave-active';
      
      setTimeout(() => {
        this.visible = false;
        this.dispatchEvent(new CustomEvent('close'));
        this.remove();
      }, 300);
    });
  }

  private clearTimer() {
    if (this.timer) {
      clearTimeout(this.timer);
      this.timer = undefined;
    }
  }

  private getIcon() {
    const icons = {
      success: '✓',
      warning: '⚠',
      info: 'ℹ',
      error: '✗'
    };
    return icons[this.type];
  }

  render() {
    if (!this.visible) {
      return html``;
    }

    return html`
      <div class="message ${this.type} ${this.animationState}">
        <span class="message-icon">${this.getIcon()}</span>
        <span class="message-content">${this.message}</span>
        ${this.showClose ? html`
          <span class="message-close" @click=${this.close}>×</span>
        ` : ''}
      </div>
    `;
  }

  // 静态方法用于快速创建消息
  static show(options: {
    type?: 'success' | 'warning' | 'info' | 'error';
    message: string;
    duration?: number;
    showClose?: boolean;
  }) {
    const message = new ZssMessage();
    message.type = options.type || 'info';
    message.message = options.message;
    message.duration = options.duration || 3000;
    message.showClose = options.showClose || false;
    
    document.body.appendChild(message);
    return message;
  }

  static success(message: string, duration?: number) {
    return ZssMessage.show({ type: 'success', message, duration });
  }

  static warning(message: string, duration?: number) {
    return ZssMessage.show({ type: 'warning', message, duration });
  }

  static info(message: string, duration?: number) {
    return ZssMessage.show({ type: 'info', message, duration });
  }

  static error(message: string, duration?: number) {
    return ZssMessage.show({ type: 'error', message, duration });
  }
}

declare global {
  interface HTMLElementTagNameMap {
    'zss-message': ZssMessage;
  }
}